<template>
  <div>
    <Layout noSearch :tabs="tabs" :tabDefault.sync="tabDefault" :total="total" :listQuery="listQuery" @search="getEnumData">
      <template #btnTop>
        <el-button type="primary" round @click="isDialog = true">添加</el-button>
      </template>
      <template #table="{height}">
        <SettingTable :height="height" :list="list" :tableData="tableData">
          <template #oper="{row}">
            <span class="oper" @click="oper(row, 1)">{{row.enable ? '停用' : '启用'}}</span>
            <span class="oper" @click="oper(row, 2)">删除</span>
          </template>
        </SettingTable>
      </template>
    </Layout>
    <AddOption :isDialog.sync="isDialog" :tabDefault="tabDefault" @search="getEnumData" />
  </div>
</template>

<script>
import { ZDY } from '../layout/config';
import Layout from '../layout/index.vue';
import SettingTable from '../layout/SettingTable.vue';
import AddOption from './AddOption.vue';
export default {
  name: 'customOption',
  components: { Layout, SettingTable, AddOption },
  data() {
    return {
      tabDefault: '',
      tableData: [],
      list: ZDY,
      tabs: [{}],
      isDialog: false,

      total: 0,
      listQuery: {
        PageSize: 50,
        PageIndex: 1
      }

    };
  },
  watch: {
    tabDefault: {
      handler() {
        this.total = 0;
        this.listQuery = { PageSize: 50, PageIndex: 1 };
        this.getEnumData();
      }
    }
  },
  methods: {
    async oper({ enable, metacode, typecode }, type) {
      if (type === 1) { //停用启用
        await this.$confirm(`此操作将${enable ? '启用' : '停用'}该选项, 是否继续?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' });
        await this.$api.optionsManage.EditEnumDataStatus({ enable: !enable, metacode, typecode });
      }
      if (type === 2) { //删除
        await this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' });
        await this.$api.optionsManage.EnumMetaData({ Metacode: metacode, Typecode: typecode });
      }
      this.getEnumData();
    },
    async getEnumType() { // tab
      const { data } = await this.$api.optionsManage.GetEnumType();
      this.tabs = data.data.sort((a, b) => a.index - b.index).map(i => ({ label: i.typename, name: i.typecode }));
      this.tabDefault = this.tabs[0].name;
    },
    async getEnumData() { //列表数据
      const { data } = await this.$api.optionsManage.GetEnumData({ metaTypeCode: this.tabDefault, ...this.listQuery });
      this.tableData = data.data.data;
      this.total = data.data.total;
    },

  },
  created() {
    this.getEnumType();
  },
};
</script>

<style lang="less" scoped>
.oper {
  cursor: pointer;
  margin-right: 10px;
}
</style>
